<template>
  <div class="three-boxs" :class="{ 'three-boxs-active': !store.modelIndex }" id="three3-boxs">
    <!-- v-if="props.moduleLists.length > 0" -->

    <el-tree
      ref="tree"
      :data="props.moduleLists"
      activable
      transition
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      draggable
      :props="threeKeys"
      :highlight-current="true"
      node-key="id"
      @node-click="Active"
      @node-drag-enter="handleDragEnter"
      @node-drop="handleDragEnd"
      :default-expanded-keys="defaultExpandKeys"
    >
      <!-- <template #icon="{ node }">
        <i class="doorIcon">&#xe665;</i>
      </template> -->

      <template #default="{ node, data }">
        <i
          class="doorIcon"
          :class="node.data.icon"
          :style="{ opacity: node.data.children.length > 0 ? 1 : 0 }"
          @Click.stop="getItemAll"
          >&#xe665;</i
        >

        <div style="flex: 1">
          <p
            v-if="node.data.text.length < 8"
            class="three-title"
            :style="{ width: node.data.level === 1 ? '170px' : node.data.level === 2 ? '150px' : '114px' }"
          >
            {{ node.data.text }}
          </p>
          <t-popup
            v-else
            attach="#three3-boxs"
            overlayClassName="popup"
            class="placement top"
            :content="node.data.text"
            placement="top"
            showArrow
            destroyOnClose
          >
            <p
              class="three-title"
              :style="{ width: node.data.level === 1 ? '170px' : node.data.level === 2 ? '150px' : '114px' }"
            >
              {{ node.data.text }}
            </p>
          </t-popup>
        </div>

        <t-popup trigger="hover" attach="#plan-child-id-2" overlay-class-name="editMenu-level-box" placement="right">
          <template #content>
            <div class="editMenu-level">
              <div class="editMenu-level-content">
                <div class="editMenu-level-item editMenu-level-item-1">
                  <div class="editMenu-child">
                    <div class="editMenu-level editMenu-level2">
                      <div
                        class="editMenu-level-item"
                        @click.stop="childAdd(node)"
                        v-if="node.data.level < 3 && node.data.children.length < 15"
                      >
                        <span class="editMenu-level-item-left-title">添加子单元</span>
                      </div>
                      <div class="editMenu-level-item" @click.stop="topAdd(node)" v-if="props.moduleLists.length < 15">
                        <span class="editMenu-level-item-left-title">上方添加单元</span>
                      </div>
                      <div
                        class="editMenu-level-item"
                        @click.stop="bottomAdd(node)"
                        v-if="props.moduleLists.length < 15"
                      >
                        <span class="editMenu-level-item-left-title">下方添加单元</span>
                      </div>
                      <div class="editMenu-level-item" @click.stop="auxiliaryAdd(node)">
                        <span class="editMenu-level-item-left-title">添加辅助信息</span>
                      </div>
                    </div>
                  </div>
                  <div class="editMenu-level-item-left" @click.stop="childclick">
                    <i class="doorIcon" @click.stop="childclick">&#xe662;</i>
                    <span class="editMenu-level-item-left-title" @click.stop="childclick">添加</span>
                  </div>
                  <i class="doorIcon">&#xe639;</i>
                </div>
                <div class="editMenu-level-item" @click.stop="delInfo(node)" v-if="node.data.children.length == 0">
                  <i class="doorIcon">&#xe634;</i>
                  <span class="editMenu-level-item-left-title">删除此单元</span>
                </div>
                <div class="editMenu-level-item" @click.stop="moveTop(node)">
                  <i class="doorIcon">&#xe63e;</i>
                  <span class="editMenu-level-item-left-title">单元上移</span>
                </div>
                <div class="editMenu-level-item" @click.stop="moveBottom(node)">
                  <i class="doorIcon">&#xe63a;</i>
                  <span class="editMenu-level-item-left-title">单元下移</span>
                </div>
              </div>
            </div>
          </template>
          <div class="editMenu">
            <i class="doorIcon">&#xe667;</i>
          </div>
        </t-popup>
      </template>
    </el-tree>
  </div>

  <div class="addAuxiliary">
    <t-drawer v-model:visible="visible" :footer="false">
      <template #header> <div class="header-text">添加辅助信息</div></template>
      <auxiliaryModel
        v-if="visible"
        :visible="visible"
        :parentId="actived ? actived : 0"
        @close="auxilaryclose"
        @submit="auxilarysubmit"
        :info="auxiliaryInfo"
        :id="0"
      />
    </t-drawer>
  </div>
  <messageModel
    submitText="删除"
    title="提示"
    :visible="visibleMessage"
    problem="确定删除此单元？"
    message="删除后无法找回"
    @closeClick="closeClick"
    @submitClick="submitClick"
  />
</template>

<script setup lang="ts" name="itemView">
// @ts-nocheck
import auxiliaryModel from './auxiliaryModel.vue';
import { Alert, MessagePlugin } from 'tdesign-vue-next';
import messageModel from '@/components/messageModel/index.vue';
import { disableSort, moduleDelete, moduleSave, moduleList } from '@/api/desgin/desgin';
import { ref, reactive, nextTick, defineExpose, watch, onMounted } from 'vue';

import { useProjectStore } from '@/store';
import { findIndex } from 'lodash';
import { ElTree } from 'element-plus';
const emit = defineEmits(['editItem', 'updateList', 'emitDel']);
const tree = ref(null);
const actived = ref(0);
const delId = ref(0);
const visibleMessage = ref(false);
const parentId = ref(0);
const visible = ref(false); //添加辅助信息弹框
const loading = ref(false);
const valueList = ref([]);
const threeKeys = {
  value: 'id',
  label: 'text',
  children: 'children',
  key: 'id',
};
const defaultExpandKeys: any = ref([-1]);
let dragFlag = false;
const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
  // console.log('----------------', draggingNode, dropNode, type);

  // console.log(dropNode.parent.childNodes.length, dropNode.level);
  // console.log(draggingNode, type);

  let flag = false; // 默认设置为 false

  flag = draggingNode.data.children.some((thirdLevel) => {
    return thirdLevel.children.length > 0;
  });
  // console.log(flag, dropNode.level, draggingNode.data.children);
  // console.log(flag, '---');

  if (
    (dropNode.level === 3 && type === 'inner') ||
    (dropNode.level === 2 && type === 'inner' && draggingNode.data.children.length > 0) ||
    (dropNode.level === 3 && draggingNode.data.children.length > 0) ||
    (dropNode.level >= 2 && flag) ||
    (dropNode.level === 1 && type === 'inner' && flag && dropNode.parent.childNodes.length > 15) ||
    dropNode.parent.childNodes.length > 15
  ) {
    // console.log('判断进入', dropNode.parent.childNodes.length); (dropNode.level === 1 && type === 'inner' && flag && dropNode.parent.childNodes.length > 15)
    console.log('判断无法进入');
    return false;
  } else {
    // console.log('可以拖拽');
    // event.dataTransfer.dropEffect = dropNode.data.isSpace ? 'move' : 'none';
    return true;
  }
};
const allowDrag = (draggingNode: Node) => {
  // console.log(draggingNode, 'draggingNode');

  return draggingNode.data.id;
};
const store = useProjectStore();
const value = ref(0);
const auxiliaryInfo = reactive({
  id: 0,
  name: '',
  description: '',
  coverUrl: '',
  parentId: 0,
  audio: {
    type: 3,
    url: '',
    description: '',
    name: '',
  },
  video: {
    type: 4,
    url: '',
    description: '',
    name: '',
  },
});

const childclick = () => {};
const clock = () => {};
const moveItem = reactive({
  info: null,
});
const props = defineProps({
  moduleLists: {
    type: Array,
  },
  ids: {
    type: Number,
  },
  parentId: {
    type: Number,
  },
  level: {
    type: Number,
  },
});
onMounted(() => {
  actived.value = props.moduleLists[0].id;
  tree.value.setCurrentKey(props.moduleLists[0].id);
  console.log(props.moduleLists[0].id, 'props.moduleLists');
});
const Active = (data) => {
  console.log(data);
  // value.value = value[0] ? value[0] : 0;

  actived.value = data.id;
  let parentId = tree.value.getNode(data.id).parent; //获取指定节点父节点
  defaultExpandKeys.value.push(parentId.key ? parentId.key : 0);
  if (data.id) {
    nextTick(() => {
      let parentId = data.parentId; //获取指定节点父节点
      //console.log('最佳', actived.value, parentId);
      emit('editItem', data.id, parentId);
    });
  }
  getItemAll();
  // //console.log(actived.value, '1111111111111111111');
};
const getItemAll = (e) => {
  // //console.log(e, 'sssssssssssssssssss');
  if (e && e[0]) {
    actived.value = e[0];
  }

  // let allItems = tree.value.getItems(actived.value);
  // setTimeout(() => {
  //   let all = document.getElementById('three3-boxs').getElementsByClassName('el-tree-node__content');
  //   let value = 0;
  //   for (let i = 0; i < all.length; i++) {
  //     value = all[i].getAttribute('data-value');

  //     allItems.forEach((element) => {
  //       // //console.log(value, element.value, element.value == value);
  //       let indexs = props.moduleLists.findIndex((el) => {
  //         return el.id == element.value;
  //       });
  //       // //console.log(indexs);
  //       if (element.value == all[i].getAttribute('data-value') && indexs === -1) {
  //         all[i].style.background = '#F5F5F5';
  //         return;
  //       }
  //     });
  //   }
  // }, 100);

  // actived.value
  // let arr = props.moduleLists.findIndex((el) => {
  //   return el.id === actived.value;
  // });
  // if (arr !== -1) {
  //   let list = [];
  //   props.moduleLists[arr].children.forEach((element) => {
  //     list.push(element.id);
  //     element.children.forEach((el) => {
  //       list.push(el.id);
  //     });
  //   });
  //   // //console.log(list);
  //   valueList.value = list;
  // }
};
const topAdd = async (node: any) => {
  let parentId = tree.value.getNode(node.data.id).parent; //获取指定节点父节点
  let arr;
  if (parentId.data.children) {
    if (parentId.data.children.length >= 15) {
      MessagePlugin.error(`最多仅可添加15个同级单元`);
      return;
    }
    let arr = {
      id: 0,
      name: '示例单元',
      description: '',
      coverUrl: '',
      parentId: parentId ? parentId.key : 0,
      data: [],
    };
  } else {
    arr = {
      id: 0,
      name: '示例单元',
      description: '',
      coverUrl: '',
      parentId: 0,
      data: [],
    };
  }

  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await moduleSave(localStorage.getItem('projectId'), arr);
    if (res.statusCode == 200) {
      actived.value = res.data;
      if (actived.value) {
        // let parentId = tree.value.getParent(actived.value); //获取指定节点父节点

        emit('editItem', actived.value, parentId.key);
      }
      let arr = {
        children: [],
        id: res.data,
        level: node.data.level,
        parentId: parentId.key ? parentId.key : 0,
        remarks: null,
        sort: 9999,
        text: '示例单元',
        value: null,
      };
      if (parentId.key) {
        let soltInfo = parentId;
        let arrNum = [];
        //console.log(soltInfo.data);
        let find = soltInfo.data.children.findIndex((el) => {
          return el.id == node.data.id;
        });
        soltInfo.data.children.forEach((element, index) => {
          if (index === find) {
            if (find !== 0) {
              arrNum.push(res.data);
            } else {
              arrNum.unshift(res.data);
            }
          }
          arrNum.push(element.id);
        });
        MessagePlugin.success(`添加成功`);
        // //console.log(soltInfo);

        updataSort(parentId.key, arrNum);
        defaultExpandKeys.value = [];
        defaultExpandKeys.value.push(parentId.key ? parentId.key : 0);
      } else {
        // let soltInfo = tree.value.getItem();
        let soltInfo = parentId;
        let arrNum = [];
        //console.log(soltInfo);
        let find = soltInfo.data.findIndex((el) => {
          return el.id == node.data.id;
        });
        soltInfo.data.forEach((element, index) => {
          if (index === find) {
            if (find !== 0) {
              arrNum.push(res.data);
            } else {
              arrNum.unshift(res.data);
            }
          }
          arrNum.push(element.id);
        });
        // //console.log(soltInfo);
        MessagePlugin.success(`添加成功`);
        updataSort(0, arrNum);
        defaultExpandKeys.value = [];
        defaultExpandKeys.value.push(parentId.key ? parentId.key : 0);
      }
      tree.value?.insertBefore(node.data.id, arr);

      // alert('1');
      // console.log(defaultExpandKeys.value, 'defaultExpandKeys.value----');

      // tree.value.appendTo(node.data.id, arr);
      // MessagePlugin.success('保存成功');
    }
    loading.value = false;
  } catch (err) {
    loading.value = false;
    //console.log(err);
  }
};
const bottomAdd = async (node: any) => {
  //下方添加单元
  let parentId = tree.value.getNode(node.data.id).parent; //获取指定节点父节点
  // console.log(parentId.data.children, '1111111111');
  let arr;
  console.log(parentId, 'ssssssssssssssssssss', parentId.key);
  if (parentId.data.children) {
    if (parentId.data.children.length >= 15) {
      MessagePlugin.error(`最多仅可添加15个同级单元`);
      return;
    }
    arr = {
      id: 0,
      name: '示例单元',
      description: '',
      coverUrl: '',
      parentId: parentId ? parentId.key : 0,
      data: [],
    };
  } else {
    arr = {
      id: 0,
      name: '示例单元',
      description: '',
      coverUrl: '',
      parentId: 0,
      data: [],
    };
  }

  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await moduleSave(localStorage.getItem('projectId'), arr);
    console.log('res.statusCode', res.statusCode);

    if (res.statusCode == 200) {
      actived.value = res.data;
      if (actived.value) {
        //let parentId = tree.value.getParent(actived.value); //获取指定节点父节点
        // //console.log('触发', actived.value, parentId);
        emit('editItem', actived.value, parentId.key);
      }
      let arr = {
        children: [],
        id: res.data,
        level: node.data.level,
        parentId: parentId.key ? parentId.key : 0,
        remarks: null,
        sort: 9999,
        text: '示例单元',
        value: null,
      };
      console.log('parentId', parentId == true);
      // alert(parentId);
      if (!parentId.key) {
        // alert(1);
        // console.log('node2', node.data.id);
        let soltInfo = parentId;

        let arrNum = [];
        let find = soltInfo.data.findIndex((el) => {
          return el.id == node.data.id;
        });
        // console.log('find-----', find);
        soltInfo.data.forEach((element, index) => {
          arrNum.push(element.id);
        });
        arrNum.splice(find + 1, 0, res.data);
        MessagePlugin.success(`添加成功`);
        updataSort(0, arrNum);
        defaultExpandKeys.value = [];
        defaultExpandKeys.value.push(parentId.key ? parentId.key : 0);
      } else {
        let soltInfo = parentId;

        let arrNum = [];

        let find = soltInfo.data.children.findIndex((el) => {
          return el.id == node.data.id;
        });
        soltInfo.data.children.forEach((element, index) => {
          arrNum.push(element.id);
        });
        arrNum.splice(find + 1, 0, res.data);

        MessagePlugin.success(`添加成功`);
        updataSort(parentId.key, arrNum);
        defaultExpandKeys.value = [];
        defaultExpandKeys.value.push(parentId.key ? parentId.key : 0);
      }
      tree.value.insertAfter(node.data.id, arr);
      emit('updateList');
      console.log('parentId.key', parentId.key);

      // defaultExpandKeys.value.push(parentId.key ? parentId.key : 0);
      // tree.value.appendTo(node.data.id, arr);
      // MessagePlugin.success('保存成功');
    }
    loading.value = false;
  } catch (err) {
    loading.value = false;
    //console.log(err);
  }
};
const auxilaryclose = () => {
  visible.value = false;
};
const auxilarysubmit = () => {
  visible.value = false;
  store.setAuxiliaryType();
};
const childAdd = async (node: any) => {
  //添加子单元
  // let parentId = tree.value.getNode(node.data.id).parent; //获取指定节点父节点
  // //console.log(parentId);
  // return;
  console.log(node);

  let arr = {
    id: 0,
    name: '示例单元',
    description: '',
    coverUrl: '',
    parentId: node.data.id,
    data: [],
  };
  try {
    if (loading.value) {
      return;
    }
    loading.value = true;
    let res = await moduleSave(localStorage.getItem('projectId'), arr);
    if (res.statusCode == 200) {
      let arr = {
        children: [],
        id: res.data,
        level: node.data.level + 1,
        parentId: 0,
        remarks: null,
        sort: 9999,
        text: '示例单元',
        value: null,
      };

      tree.value.append(arr, node.data.id);
      actived.value = [res.data];
      if (actived.value) {
        let parentId = tree.value.getNode(actived.value).parent; //获取指定节点父节点

        emit('editItem', actived.value, parentId);
      }
      MessagePlugin.success('保存成功');
      emit('updateList');
    }
    loading.value = false;
  } catch {
    loading.value = false;
  }
};
const auxiliaryAdd = (node: any) => {
  //添加辅助信息
  console.log(node);

  auxiliaryInfo.parentId = node.data.id;
  visible.value = true;
  // console.log('999');
};
const delInfo = (node: any) => {
  delId.value = node.data.id;
  visibleMessage.value = true;
  // if (loading.value) {
  //   return;
  // }
  // loading.value = true;
  // moduleDelete(localStorage.getItem('projectId'), node.data.id).then((res: any) => {
  //   if (res.statusCode == 200) {
  //     MessagePlugin.success(`删除成功`);
  //   }
  // });
  //删除该目录
};
const closeClick = () => {
  //取消删除

  visibleMessage.value = false;
};
const submitClick = () => {
  try {
    // 删除单元;
    if (loading.value) {
      return;
    }
    loading.value = true;

    moduleDelete(localStorage.getItem('projectId'), delId.value).then((res: any) => {
      if (res.statusCode == 200) {
        actived.value = props.moduleLists[0].id;

        emit('editItem', actived.value, 0);
        // alert(tree.value.getNode(delId.value).parent.data.id);
        let parentId = tree.value.getNode(delId.value).parent; //获取指定节点父节点
        tree.value.remove(delId.value);
        defaultExpandKeys.value.push(parentId.key);
        // //console.log(parentId.data, '父节点id');
        if (parentId) {
          if (parentId.data.children?.length === 1) {
            let item = parentId.data;
            item.children = [];
            // tree.value.setItem(parentId.data.id,{})
            tree.value.updateKeyChildren(parentId, item);
          }
        }
        emit('emitDel');
        MessagePlugin.success(`删除成功`);

        // if (delId.value === actived.value) {
        //   // actived.value = props.moduleLists[0].id;
        // }
        delId.value = 0;
      }
      loading.value = false;
      visibleMessage.value = false;
    });
  } catch {
    loading.value = true;
    visibleMessage.value = false;
  }
};
const moveTop = (node: any) => {
  console.log(node);

  let parentId = node.data.parentId; //获取指定节点父节点
  let soltInfo = node.parent.data;
  let arrNum = [];
  if (soltInfo.children) {
    let find = soltInfo.children.findIndex((el) => {
      return el.id == node.data.id;
    });
    if (find == 0) {
      return;
    }
    let oldId = soltInfo.children[find].id; //排序前id
    let newId = soltInfo.children[find - 1].id; //即将替换的id
    soltInfo.children.forEach((element, index) => {
      arrNum.push(element.id);
    });
    arrNum[find] = newId;
    arrNum[find - 1] = oldId;
  } else {
    let find = soltInfo.findIndex((el) => {
      return el.id == node.data.id;
    });
    if (find == 0) {
      return;
    }
    console.log(find, '获取');
    let oldId = soltInfo[find].id; //排序前id
    let newId = soltInfo[find - 1].id; //即将替换的id
    soltInfo.forEach((element, index) => {
      arrNum.push(element.id);
    });
    arrNum[find] = newId;
    arrNum[find - 1] = oldId;
  }

  updataSort(parentId ? parentId : 0, arrNum);

  //单元上移
};
const moveBottom = (node: any) => {
  let parentId = node.data.parentId; //获取指定节点父节点
  let soltInfo = node.parent.data;
  let arrNum = [];

  if (soltInfo.children) {
    let find = soltInfo.children.findIndex((el) => {
      return el.id == node.data.id;
    });
    if (find == soltInfo.children.length - 1) {
      return;
    }
    let oldId = soltInfo.children[find].id; //排序前id
    let newId = soltInfo.children[find + 1].id; //即将替换的id
    soltInfo.children.forEach((element, index) => {
      arrNum.push(element.id);
    });
    arrNum[find] = newId;
    arrNum[find + 1] = oldId;
  } else {
    let find = soltInfo.findIndex((el) => {
      return el.id == node.data.id;
    });
    if (find == soltInfo.length - 1) {
      return;
    }
    let oldId = soltInfo[find].id; //排序前id
    let newId = soltInfo[find + 1].id; //即将替换的id
    soltInfo.forEach((element, index) => {
      arrNum.push(element.id);
    });
    arrNum[find] = newId;
    arrNum[find + 1] = oldId;
  }

  updataSort(parentId ? parentId : 0, arrNum);

  //单元下移
};
const updataSort = async (parentId, sort, flag?: boolean) => {
  console.log('+++');

  try {
    let res = await disableSort(localStorage.getItem('projectId'), parentId, sort);
    if (res.statusCode == 200) {
      if (flag) {
      } else {
        emit('updateList');
      }
    }
  } catch {}
};
const setActive = (e) => {
  nextTick(() => {
    actived.value = [e];
  });
};

defineExpose({
  setActive,
});

watch(
  () => props.moduleLists,
  () => {
    // console.log(props.moduleLists, 'props.moduleLists');
    // tree.value.setData(props.moduleLists);
  },
  { deep: true },
);

const handleDragEnd = (draggingNode: Node, dropNode: Node, dropType: NodeDropType, e: DragEvents) => {
  // console.log('handleDragEnd', draggingNode, dropNode, dropType);
  // if (!dropNode.parent.key) {
  //   return;
  // }
  let parentId;
  let idList;
  let arrNum = [];
  if (dropType == 'inner') {
    parentId = dropNode.key;
    idList = dropNode.data.children;
    idList.forEach((element, index) => {
      arrNum.push(element.id);
    });
  } else {
    parentId = dropNode.parent.key; //获取指定节点父节点
    idList = dropNode.parent.childNodes;
    idList.forEach((element, index) => {
      arrNum.push(element.key);
    });
  }

  // console.log('idList', idList);

  updataSort(parentId ? parentId : 0, arrNum, true);
  defaultExpandKeys.value.push(parentId ? parentId : 0);
};

const handleDragEnter = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  // console.log('tree drag enter:', dropNode);
};
// const handleDragLeave = ({ node, e }) => {
//   if (node.level === 3) {
//     MessagePlugin.warning('单元层级不能超过3级');
//     e.preventDefault();
//     return;
//   }
// };

// const emit = defineEmits(['navModel', 'delModule']);
</script>

<style lang="less" scoped>
:deep(.el-tree) {
  position: relative;
  z-index: 10;
}
.three-boxs {
  display: block;
  position: relative;
  width: 284px;
  :deep(.el-tree-node) {
    // position: relative;
  }
  :deep(.el-tree-node__content) {
    position: relative;
    z-index: 3;
    height: 44px;
  }
  :deep(.el-tree-node__content:hover) {
    z-index: 1;
  }
  :deep(.el-tree-node__content) {
    position: relative;
    z-index: 3;
    height: 44px;
  }
  :deep(.el-tree-node__content:hover) {
    z-index: 1;
  }
}
.three-boxs-active {
  :deep(.el-tree-node__content) {
    position: relative;
    animation-name: coverMove;
    animation-duration: 1s;
    animation-fill-mode: forwards; /* 动画结束后保持结束时的样式 */
  }
  :deep(.el-tree-node__content:hover) {
    animation-name: coverMove;
    animation-duration: 1s;
    animation-fill-mode: forwards; /* 动画结束后保持结束时的样式 */
  }
}
@keyframes coverMove {
  0% {
    z-index: 1;
  }
  50% {
    z-index: 1;
  }
  90% {
    z-index: 1;
  }
  100% {
    z-index: 666;
  }
}
:deep(.el-tree-node__content--open) {
  background: #f5f5f5;
  // .three-title {
  // color: #e62b17;
  // }
}
:deep(.el-tree-node__content:hover) {
  background: #f0f0f0;
}
:deep(.t-is-active .el-tree__label) {
  background: transparent;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}

:deep(.el-tree__operations) {
  position: relative;
}
:deep(.el-tree__icon) {
  margin-left: 20px;
  .doorIcon {
    transition: all 0.3s;
    font-size: 16px;
    color: RGBA(158, 158, 158, 1);
    transform: rotate(-90deg);
  }
}
:deep(.el-tree-node__content--open) {
  .el-tree__icon {
    .doorIcon {
      transform: rotate(0deg);
    }
  }
}
.editMenu {
  opacity: 0;
  position: relative;
  margin-right: 24px;
  z-index: 9999;
  width: 24px;
  height: 24px;
  // background: #d9d9d9;
  border-radius: 4px;

  .doorIcon {
    font-size: 24px;
    color: RGBA(134, 134, 134, 1);
  }
}
.editMenu:hover {
  background: #d9d9d9;
}
:deep(.t-is-active) {
  .editMenu:hover {
    background: #ffccbd;
  }
}
.editMenu-level {
  // display: none;
  position: absolute;
  top: -7px;
  right: -163px;
}
.editMenu-level-content {
  display: block;

  padding: 4px 0;
  background: #ffffff;
  z-index: 999;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.1), 0px 8px 10px 1px rgba(0, 0, 0, 0.06),
    0px 3px 14px 2px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  // margin-left: 30px;
}
.editMenu-level-item {
  display: flex;
  align-items: center;
  width: 180px;
  height: 36px;
  background: #ffffff;
  padding: 0px 16px;
  .doorIcon {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.8);
  }
  span {
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
  }
  .editMenu-level-item-left-title {
    margin-left: 4px;
  }
}
.editMenu-level-item:hover {
  background: #f5f5f5;
}
.editMenu-level-item-1 {
  position: relative;
  .editMenu-level-item-left {
    .doorIcon {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.8);
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.8);
      line-height: 24px;
    }
  }
}
:deep(.el-tree-node__content:hover) {
  // height: 44px;
  .editMenu {
    opacity: 1 !important;
  }
}
.editMenu:hover {
  .editMenu-level {
    display: block;
    opacity: 1;
  }
}
.editMenu-child {
  display: none;
  position: absolute;
  top: 0;
  right: 0px;
  width: 184px;
  padding-left: 4px;
}
.editMenu-level-item-1:hover {
  .editMenu-child {
    display: block;
  }
  .editMenu-level2 {
    width: 180px;
    left: 180px;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
  }
}
:deep(.t-is-active) {
  background: #ffece6 !important;
  .three-title {
    color: #e62b17;
  }
}
:deep(.el-tree__label) {
  display: flex;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.three-title {
  // display: flex;

  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#three3-boxs {
  :deep(.t-popup__content) {
    background-color: #333;
    color: #fff;
    border-color: #333;
    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
    // width: 296px;
    font-size: 14px;
    padding: 4px 10px;
    font-weight: 400;
    color: #ffffff;
    line-height: 22px;
  }
  :deep(.placement) {
    // border-color: #333;
    background: transparent !important;
  }
  :deep(.t-popup[data-popper-placement^='left'] .t-popup__arrow::before) {
    background-color: #333;
    // border-color: #333;
  }
  :deep(.t-popup__arrow::before) {
    background-color: #333;
  }
}
.shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}

:deep(.el-tree__icon::after) {
  display: none;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background: rgba(230, 43, 23, 0.1) !important;
}
.addAuxiliary {
  :deep(.t-drawer__content-wrapper) {
    width: 720px !important;
  }
  :deep(.t-drawer__header) {
    padding: 20px 30px !important;
  }
  :deep(.t-drawer__body) {
    padding: 0 !important;
  }
  :deep(.narrow-scrollbar) {
    scrollbar-width: none !important;
    &::-webkit-scrollbar {
      display: none !important;
    }
  }
}
.addAuxiliary-move {
  :deep(.t-drawer__content-wrapper) {
    width: 420px !important;
  }
}
:deep(.el-tree-node__children) {
  overflow: visible !important;
}
:deep(.el-tree__drop-indicator) {
  background: #e62b17 !important;
  // z-index: 99 ;
}
:deep(.el-tree-node__content > i) {
  margin-left: 24px !important;
  color: rgba(0, 0, 0, 0.38) !important;
  margin-right: 8px;
  transition: all 0.3s;
}
:deep(.el-tree-node__content > .el-icon) {
  display: none;
}
:deep(.el-tree-node__content) {
  background: #fff;
}
.expanded + .doorIcon {
  transform: rotate(90deg);
}
:deep(.is-expanded .el-tree-node__content) {
  background-color: #f5f5f5 !important;
}
:deep(.is-expanded > .el-tree-node__content) {
  background-color: transparent !important;
}
:deep(.is-drop-inner > .el-tree-node__content) {
  background: #ffece6;
  box-shadow: inset 0px 1px 0px 0px #e62b17, inset 0px -1px 0px 0px #e62b17;
}
</style>
